<template>
  <el-dialog
    title="题目预览"
    :visible="showDialog"
    width="65%"
    @close="closeDialog"
  >
    <el-row :gutter="20">
      <el-col :span="6"
        ><div>【题型】：{{ hquestionType(object.questionType) }}</div></el-col
      >
      <el-col :span="6"
        ><div>【编号】：{{ object.id }}</div></el-col
      >
      <el-col :span="6"
        ><div>【难度】：{{ hdifficulty(object.difficulty) }}</div></el-col
      >
      <el-col :span="6"
        ><div>【标签】：{{ object.tags }}</div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div>【学科】：{{ object.subjectName }}</div></el-col
      >
      <el-col :span="6"
        ><div>【目录】：{{ object.directoryName }}</div></el-col
      >
      <el-col :span="6"
        ><div>【方向】：{{ object.direction }}</div></el-col
      >
    </el-row>
    <hr />
    <div>【题干】:</div>
    <div v-html="object.question" style="color: blue"></div>
    <div>
      <div v-if="object.questionType === '1'">
        <div>
          {{ hquestionType(object.questionType) }}题
          选项:（以下选中的选项为正确答案）
        </div>
        <el-radio-group v-model="radio" class="radio">
          <div v-for="item in object.options" :key="item.id">
            <el-radio readonly :label="item.isRight" class="radio">{{
              item.title
            }}</el-radio>
          </div>
        </el-radio-group>
      </div>
      <div v-if="object.questionType === '3'">
        <div>简答题</div>
        <div v-for="item in object.options" :key="item.id">
          {{ item.title }}
        </div>
      </div>
      <div v-if="object.questionType === '2'">
        <div>
          {{ hquestionType(object.questionType) }}题
          选项:（以下选中的选项为正确答案）
          <el-checkbox-group v-model="checkList">
            <div v-for="item in object.options" :key="item.id">
              <el-checkbox :label="item.isRight" class="radio">{{
                item.title
              }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>

    <hr />
    <div>
      【参考答案】：
      <el-button type="danger" @click="showvideo">视频答案预览</el-button>
      <div v-if="showVideo">
        <video :src="object.videoURL" controls width="500px" autoplay></video>
      </div>
    </div>
    <hr />
    【答案解析】：
    <div v-html="object.answer"></div>
    <hr />
    <div>【题目备注】：{{ object.remarks }}</div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" type="primary">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean
    },
    object: {
      type: Object
    }
  },
  data () {
    return {
      Qlist: [],
      radio: 1,
      showVideo: false,
      checkList: [1]
    }
  },

  methods: {
    closeDialog () {
      this.$emit('closeDialog')
      this.showVideo = false
    },
    // 难度
    hdifficulty (type) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[type]
    },
    // 题型
    hquestionType (type) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[type]
    },
    showvideo () {
      this.showVideo = true
    }
  }
}
</script>

<style scoped lang='scss'>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.radio {
  pointer-events: none;
}
</style>
